<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>指标统计通用外壳</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../common/mui/mui.css" rel="stylesheet" />
		<link href="../common/css/iconfont.css" rel="stylesheet" />
		<link href="../common/css/yahei.css" rel="stylesheet" />
		<link href="../common/css/app.css" rel="stylesheet" />
		<style>
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item{
				border-bottom: solid 2px transparent;
				height: 36px;
				line-height: 36px;
				margin: 0 var(--size20);
				padding: 0;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				border-bottom: solid 2px var(--mainColor);
				color: var(--mainColor);
			}
			html,body{
				background-color: var(--bgColor);
			}
			#sliderSegmentedControl{
				background-color: white;
			}
			#slider{
				top: 54px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"></h1>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div id="scroll" class="mui-scroll"></div>
				</div>
			</div>
		</div>
		<script src="../common/mui/mui.js"></script>
		<script src="../common/js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				var _self = plus.webview.currentWebview();
				var pagesArr = _self.pagesArr
				mui('.mui-title')[0].innerHTML = _self.title;
				var html = ''
				for (var i = 0; i < pagesArr.length; i++) {
					var onePage = pagesArr[i] //{id: url,url: url,extras: {}}
					var active=''
					if (onePage.active && html.indexOf('mui-active') == -1) {
						active = 'mui-active'
					}
					html += '<div class="mui-control-item '+active+'" data-wid="'+onePage['id']+'">'+onePage['title']+'</div>'
				}
				mui('#scroll')[0].innerHTML = html;
				mui('.mui-slider').slider();  
				mui('.mui-scroll-wrapper').scroll({
					bounce: true,
					indicators: false, //是否显示滚动条
				});
				var group = new webviewGroup(_self.id, {
					items: pagesArr,
					top:48+44,
					onChange: function(obj) {
						var c = document.querySelector(".mui-control-item.mui-active");
						if(c) {
							c.classList.remove("mui-active");
						}
						var target = document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")");
						target.classList.add("mui-active");
						if(target.scrollIntoView) {
							target.scrollIntoView();
						}
					}
				});
				setTimeout(function() {
					group.switchTab(mui('#scroll .mui-active')[0].getAttribute("data-wid"));
					mui('.mui-slider').slider();
				}, 500);
				mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
					var wid = this.getAttribute("data-wid");
					group.switchTab(wid);
					mui('.mui-slider').slider();
				});
				
			});
		</script>
	</body>

</html>
